<script setup lang="ts">
	import { computed, reactive, ref } from 'vue'
	import { accountList } from '@/package_tms/api/Home'
	import { onLoad } from '@dcloudio/uni-app'
	import { useNotify } from '@/hooks/web/useNotify/index.js'

	// 消息弹窗
	const NotifyRef = ref<any>(null)
	const { showNotify } = useNotify(NotifyRef)

	onLoad(() => {
		toPage(1)
	})

	const tabIndex = ref(1)
	const useTabs = () => {
		const tabsList = computed(() => {
			return [
				{
					name: '待上缴金额',
					tiem: taskInfo.value.wait_money || 0,
					img: '/package_tms/static/icon/icon8.png',
					id: 1
				},
				{
					name: '待审核金额',
					tiem: taskInfo.value.check_money || 0,
					img: '/package_tms/static/icon/icon9.png',
					id: 2
				}
			]

		})

		return {
			tabsList
		}
	}
	const { tabsList } = useTabs()
	const toPage = (id : number) => {
		tabIndex.value = id
		paging.value?.reload()
	}

	const paging = ref<ZPagingInstance>()
	const useCURD = () => {
		const taskInfo = ref({})
		const dataList = ref([])

		const getList : ZPagingEvent.Query = async (page, limit) => {
			const params = { page, limit, pay_type: tabIndex.value }
			try {
				const res = await accountList(params)
				taskInfo.value.wait_money = res.data.wait_money
				taskInfo.value.check_money = res.data.check_money

				paging.value?.complete([...res.data.data])
			} catch (err) {
				showNotify({
					type: 'error',
					message: err.msg
				})
				paging.value?.complete(false)
			}
		}

		const searchAction = () => {
			paging.value?.reload()
		}

		return {
			taskInfo,
			dataList,
			getList,
			searchAction
		}
	}
	const { taskInfo, dataList, getList, searchAction } = useCURD()
</script>


<template>
	<z-paging ref="paging" v-model="dataList" @query="getList" bg-color="rgba(242, 243, 245, 1)">
		<template #top>
			<view class="content-header">
				<view class="header-box">
					<view :class="tabIndex == item.id ? 'header-box1' : 'header-box2'" v-for="(item, index) in tabsList"
						:key="index" @tap="toPage(item.id)">
						<view class="header-left">
							<image style="width: 80rpx;height: 80rpx;" :src="item.img"></image>
						</view>
						<view class="header-right">
							<view class="right-name">{{item.name}}</view>
							<view class="right-text">{{item.tiem}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="content-name">明细</view>
		</template>
		<view class="main">
			<view class="content-box" v-for="(item,index) in dataList" :key="index">
				<view class="box-header">
					<view class="header-name">{{item.store.name}}</view>
					<view class="header-text">￥{{item.money}}</view>
				</view>
				<view class="box-line"></view>
				<view class="box-word">签收日期：<span style="color: rgba(2, 14, 36, 1);">{{item.create_time}}</span>
				</view>
				<view class="box-word">订单日期：<span style="color: rgba(2, 14, 36, 1);">{{item.order_time}}</span>
				</view>
			</view>
		</view>
		<up-notify ref="NotifyRef"></up-notify>
	</z-paging>
</template>

<style scoped lang="scss">
	.content-header {
		width: 100%;
		height: 200rpx;
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #fff;

		.header-box {
			display: flex;
			width: 702rpx;
			height: 132rpx;
			border-radius: 12rpx;
			background: rgba(242, 243, 245, 1);
			box-shadow: 8rpx 4rpx 22rpx rgba(55, 131, 252, 0.05);

			.header-box1 {
				flex: 1;
				height: 132rpx;
				border-radius: 12rpx;
				background: rgba(15, 127, 255, 1);
				box-shadow: 8rpx 4rpx 22rpx rgba(55, 131, 252, 0.05);
				padding: 30rpx;
				box-sizing: border-box;

				.header-left {
					display: inline-block;
					margin-right: 20rpx;
				}

				.header-right {
					display: inline-block;

					.right-name {
						font-size: 28rpx;
						font-weight: 500;
						color: rgba(255, 255, 255, 0.8);
						margin-bottom: 10rpx;
					}

					.right-text {
						font-size: 32rpx;
						font-weight: 700;
						color: rgba(255, 255, 255, 1);
					}
				}
			}

			.header-box2 {
				flex: 1;
				height: 132rpx;
				border-radius: 12rpx;
				padding: 30rpx;
				box-sizing: border-box;

				.header-left {
					display: inline-block;
					margin-right: 20rpx;
				}

				.header-right {
					display: inline-block;

					.right-name {
						font-size: 28rpx;
						font-weight: 500;
						color: rgba(100, 101, 102, 1);
						margin-bottom: 10rpx;
					}

					.right-text {
						font-size: 32rpx;
						font-weight: 700;
						color: rgba(2, 14, 36, 1);
					}
				}
			}
		}
	}

	.content-name {
		font-size: 28rpx;
		font-weight: 700;
		color: rgba(2, 14, 36, 1);
		margin: 40rpx 0rpx 40rpx 30rpx;
	}

	.main {
		width: 100%;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom);

		.content-box {
			width: 100%;
			height: 214rpx;
			background: rgba(255, 255, 255, 1);
			padding: 30rpx;
			box-sizing: border-box;
			margin-bottom: 30rpx;

			.box-header {
				display: flex;
				justify-content: space-between;

				.header-name {
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(2, 14, 36, 1);
				}

				.header-text {
					font-size: 32rpx;
					font-weight: 400;
					color: rgba(245, 99, 81, 1);
				}

			}

			.box-line {
				width: 702rpx;
				height: 2rpx;
				background: rgba(0, 0, 0, 0.1);
				margin: 20rpx auto;
			}

			.box-word {
				font-size: 24rpx;
				font-weight: 500;
				color: rgba(100, 101, 102, 1);
				margin-bottom: 20rpx;
			}
		}
	}
</style>